<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
    <head>
        <link href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet"/>
        <link th:href="@{/static/css/main.css}" rel="stylesheet"/>
        <link th:href="@{/webjars/bootstrap-table/dist/bootstrap-table.min.css}" rel="stylesheet"/>
        <link th:href="@{/webjars/font-awesome/css/font-awesome.min.css}" rel="stylesheet"/>
    </head>
    <body>

        <table
            data-toggle="table"
            data-url="/static/json/data1.json"
            data-height="400"
            data-row-style="rowStyle">
            <thead>
                <tr>
                    <th data-field="id">Item ID</th>
                    <th data-field="name">
                        <i class="fa fa-star"></i>
                        Item Name
                    </th>
                    <th data-field="price">
                        <i class="fa fa-heart"></i>
                        Item Price
                    </th>
                </tr>
            </thead>
        </table>
        <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
        <script th:src="@{/webjars/popper.js/dist/umd/popper.min.js}"></script>
        <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
        <script th:src="@{/webjars/bootstrap-table/dist/bootstrap-table.min.js}"></script>

        <script>
            function rowStyle(row, index) {
            var classes = [
            'bg-blue',
            'bg-green',
            'bg-orange',
            'bg-yellow',
            'bg-red'
            ]

            if (index % 2 === 0 && index / 2 < classes.length) {
            return {
            classes: classes[index / 2]
            }
            }
            return {
            css: {
            color: 'blue'
            }
            }
            }
        </script>
    </body>
</html>